<template>
  <div class="about">
    <h1>This is an about page {{count}}</h1>
    <button @click="addHandle">add</button>
    <button @click="minusHandle">minsu</button>
    <p>{{pow}}</p>
  </div>
</template>

<script lang="ts">
import { ref, computed, watchEffect } from 'vue';

const count = ref(1);

const addHandle = () => {
  count.value += 5;
};

const minusHandle = () => {
  count.value -= 6;
};

const pow = computed(() => count.value * count.value);

const stop = watchEffect(() => {
  if (pow.value >= 20) {
    console.log(count.value);
    stop();
  }
});

export default {
  setup() {
    return {
      count,
      pow,
      addHandle,
      minusHandle,
    };
  },
};
</script>
